@use '../../variables';

$checkboxWidth: 17px;

#{variables.$block} {
    &__checkbox_cell {
        position: relative;
        min-width: $checkboxWidth;
        width: $checkboxWidth;
    }

    &__selection-checkbox {
        display: flex;
        align-items: center;
        padding: inherit;
        border-block-end: none;
        position: absolute;
        inset: 0;

        &_vertical-align_top {
            align-items: start;
        }
    }

    &__row_selected {
        background: var(--g-color-base-selection);

        #{variables.$block}__cell_sticky_start,
        #{variables.$block}__cell_sticky_end {
            background:
                linear-gradient(
                    to right,
                    var(--g-color-base-selection),
                    var(--g-color-base-selection)
                ),
                linear-gradient(
                    to right,
                    var(--g-color-base-background),
                    var(--g-color-base-background)
                );
        }

        &#{variables.$block}__row_interactive:hover {
            background: var(--g-color-base-selection-hover);

            #{variables.$block}__cell_sticky_start,
            #{variables.$block}__cell_sticky_end {
                background:
                    linear-gradient(
                        to right,
                        var(--g-color-base-selection-hover),
                        var(--g-color-base-selection-hover)
                    ),
                    linear-gradient(
                        to right,
                        var(--g-color-base-background),
                        var(--g-color-base-background)
                    );
            }
        }
    }
}
